<template>
  <div>
    <el-input v-if="prop.FLPR_InputTypeDesc == 'Text'" :placeholder="prop.FLPR_Describe" :value="prop.value"
      @input="valueChange" />
    <el-checkbox v-else-if="prop.FLPR_InputTypeDesc == 'Check'" :checked="prop.value == 'true' ? true : false"
      @change="valueChange">
      {{ prop.FTPR_Describe }}
    </el-checkbox>
    <div v-else-if="prop.FLPR_InputTypeDesc == 'Options'">
      <div v-for="(option, index) in options" :key="index" style="margin-bottom: 5px">
        <el-input placeholder="请输入内容" v-model="option.Text" @input="optionChange">
          <template slot="prepend">{{ index + 1 }}</template>
          <template slot="append">
            <el-button icon="el-icon-delete" @click="removeOption(index)"></el-button>
          </template>
        </el-input>
      </div>
      <div style="margin-left: 20px">
        <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addOption(prop)">
          添加选项
        </el-button>
      </div>
      <el-divider />
    </div>
    <el-select v-else-if="prop.FLPR_InputTypeDesc == 'Selections'" v-model="prop.value" @input="valueChange" clearable>
      <el-option v-for="item in selections" :key="item.Key" :value="item.Value" :label="item.Key"></el-option>
    </el-select>
    <el-input-number v-else-if="prop.FLPR_InputTypeDesc == 'Number'" v-model="prop.value" :step="prop.FLPR_NumberStep"
      :min="prop.FLPR_NumberMin" :max="prop.FLPR_NumberMax" @input="valueChange"></el-input-number>
    <div v-else-if="prop.FLPR_InputTypeDesc == 'OptionDetails'">
      <div v-for="(option, index) in optionDetails" :key="index" style="margin-bottom: 5px">
        <el-input placeholder="请输入内容" v-model="option.Text" @input="optionDetailChange">
          <template slot="prepend">{{ index + 1 }}</template>
          <template slot="append">
            <el-button icon="el-icon-delete" @click="removeOptionDetail(index)"></el-button>
          </template>
        </el-input>
        <div v-for="(item, i) in option.Items" :key="i" style="margin:5px 0px 5px 15px">
          <el-input placeholder="请输入内容" v-model="item.Text" @input="optionDetailChange">
            <template slot="prepend">{{ i + 1 }}</template>
            <template slot="append">
              <el-button icon="el-icon-delete" @click="removeOptionItem(option, i)"></el-button>
            </template>
          </el-input>
        </div>

        <div style="margin-left: 30px">
          <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
            @click="addOptionItem(option)">
            添加子项
          </el-button>
        </div>
      </div>
      <div style="margin-left: 20px">
        <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addOptionDetail()">
          添加选项
        </el-button>
      </div>
      <el-divider />
    </div>
    <el-select v-else-if="prop.FLPR_InputTypeDesc == 'Interface'" v-model="prop.value" @input="valueChange" clearable>
      <el-option v-for="item in datas" :key="item.id" :value="item.id" :label="item.label"></el-option>
    </el-select>
    <div style="font-size:12px;color:red">{{ prop.FLPR_Describe }}</div>
  </div>
</template>
<script>
import { getInterfaceDatas } from '@/api/flowCenter/field/fieldCommon'
export default {
  props: ['value', 'isBusiness'],
  data: function () {
    return {
      prop: {},
      options: [],
      optionDetails: [],
      selections: [],
      datas: []
    }
  },
  watch: {
    options() {
      if (this.isBusiness) {
        this.prop.BFFP_Value = JSON.stringify(this.options)
      } else {
        this.prop.FFLP_Value = JSON.stringify(this.options)
      }
    },
    value: function (val) {
      this.prop = val
      this.prop.value = this.isBusiness
        ? this.prop.BFFP_Value
        : this.prop.FFLP_Value
      if (this.prop.FLPR_InputTypeDesc == 'Options') {
        this.options = []
        if (this.isBusiness) {
          if (this.prop.BFFP_Value) {
            this.options = JSON.parse(this.prop.BFFP_Value)
          }
        } else {
          if (this.prop.FFLP_Value) {
            this.options = JSON.parse(this.prop.FFLP_Value)
          }
        }
      }
      if (
        this.prop.FLPR_InputTypeDesc == 'Selections' &&
        this.prop.FLPR_Selections
      ) {
        this.selections = JSON.parse(this.prop.FLPR_Selections)
      }
    },
  },
  methods: {
    valueChange(val) {
      this.prop.value = val
      if (this.isBusiness) {
        this.prop.BFFP_Value = val
      } else {
        this.prop.FFLP_Value = val
      }
      this.$forceUpdate()
    },
    addOption() {
      this.options.push({ Text: '' })
      this.$forceUpdate()
    },
    removeOption(index) {
      this.options.splice(index, 1)
      this.$forceUpdate()
    },
    addOptionDetail() {
      this.optionDetails.push({ Text: '', Items: [] })
      this.$forceUpdate()
    },
    removeOptionDetail(index) {
      this.optionDetails.splice(index, 1)
      this.$forceUpdate()
    },
    addOptionItem(option) {
      option.Items.push({ Text: '' })
      this.$forceUpdate()
    },
    removeOptionItem(option, index) {
      option.Items.splice(index, 1)
      this.$forceUpdate()
    },
    optionChange() {
      if (this.isBusiness) {
        this.prop.BFFP_Value = JSON.stringify(this.options)
      } else {
        this.prop.FFLP_Value = JSON.stringify(this.options)
      }
    },
    optionDetailChange() {
      if (this.isBusiness) {
        this.prop.BFFP_Value = JSON.stringify(this.optionDetails)
      } else {
        this.prop.FFLP_Value = JSON.stringify(this.optionDetails)
      }
    },
  },
  mounted: function () {
    this.prop = this.value
    this.prop.value = this.isBusiness
      ? this.prop.BFFP_Value
      : this.prop.FFLP_Value
    if (this.prop.FLPR_InputTypeDesc == 'Options') {
      if (this.isBusiness) {
        if (this.prop.BFFP_Value) {
          this.options = JSON.parse(this.prop.BFFP_Value)
        }
      } else {
        if (this.prop.FFLP_Value) {
          this.options = JSON.parse(this.prop.FFLP_Value)
        }
      }
    }
    if (this.prop.FLPR_InputTypeDesc == 'OptionDetails') {
      if (this.isBusiness) {
        if (this.prop.BFFP_Value) {
          this.optionDetails = JSON.parse(this.prop.BFFP_Value)
        }
      } else {
        if (this.prop.FFLP_Value) {
          this.optionDetails = JSON.parse(this.prop.FFLP_Value)
        }
      }
    }
    if (
      this.prop.FLPR_InputTypeDesc == 'Selections' &&
      this.prop.FLPR_Selections
    ) {
      this.selections = JSON.parse(this.prop.FLPR_Selections)
    }
    if (this.prop.FLPR_InputTypeDesc == 'Interface' && this.prop.FLPR_Interface) {
      if (this.prop.value) {
        this.prop.value = Number(this.prop.value)
      }
      getInterfaceDatas(this.prop.FLPR_Interface).then(({ data }) => { this.datas = data })
    }
  },
}
</script>
<style scoped>
.select-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style>
